<script setup>
import { Message } from 'element-ui';
import { useRequest, useFileUrlDownload } from '@/hooks';
import { useGlobalState } from '@/store/globalState.js';
import { getContractM, getDownloadPath } from '@/api/index.js';
import { TableList } from '@/components/MainComponents.js';
import QueryForm from '@/components/QueryForm.vue';

const appContainer = ref(null);
const contBoxHeight = ref(null);
const formRef = ref(null);
const searchData = ref({
  enterpriseName: '',
  fileName: '',
  projectType: '',
  fileType: '',
  dateRange: [],
  sDate: '',
  eDate: '',
  pageSize: 10,
  pageNum: 1,
});
const searchList = ref([
  {
    type: 'input',
    width: 180,
    label: '关联机构名称',
    prop: 'enterpriseName',
    placeholder: '请输入机构名称',
  },
  {
    type: 'input',
    width: 180,
    label: '附件文件名称',
    prop: 'fileName',
    placeholder: '请输入文件名称',
  },
  {
    type: 'select',
    label: '项目类型',
    prop: 'projectType',
    placeholder: '请选择',
    filterable: true,
    statusOptions: [
      {
        key: 'ALL',
        label: '全部',
      },
      {
        key: 'JC',
        label: '监测',
      },
      {
        key: 'TG',
        label: '托管',
      },
    ],
    selectProps: {
      value: 'key',
      label: 'label',
    },
  },
  {
    type: 'select',
    label: '档案类型',
    prop: 'fileType',
    placeholder: '请选择',
    filterable: true,
    statusOptions: [
      {
        key: '全部',
        label: '全部',
      },
      {
        key: '收资信息',
        label: '收资信息',
      },
      {
        key: '项目合同',
        label: '项目合同',
      },
      {
        key: '可行性研究报告',
        label: '可行性研究报告',
      },
      {
        key: '能源审计报告',
        label: '能源审计报告',
      },
      {
        key: '项目立项批复文件',
        label: '项目立项批复文件',
      },
      {
        key: '补充协议(如有)',
        label: '补充协议(如有)',
      },
      {
        key: '项目成分干系表',
        label: '项目成分干系表',
      },
      {
        key: '项目资产信息',
        label: '项目资产信息',
      },
      {
        key: '其他',
        label: '其他',
      },
    ],
    selectProps: {
      value: 'key',
      label: 'label',
    },
  },
  {
    type: 'daterange',
    label: '记录时间',
    prop: 'sDate',
    placeholder: '选择开始结束时间年月日',
  },
]);
const selectionList = ref([]);
const open = ref(false);
const openUrl = ref('');
const open2 = ref(false);
const open2Url = ref('');
const detailsData = ref(null);
const detailsList = ref([
  { label: '附件文件', key: 'fileName' },
  { label: '档案类型', key: 'fileType' },
  { label: '记录时间', key: 'uploadTime' },
  { label: '项目类型', key: 'projectType' },
  { label: '机构名称', key: 'enterpriseName' },
  { label: '机构代码', key: 'enterpriceCode' },
]);
const [res, loading, run] = useRequest(getContractM, {
  defaultParams: [searchData.value],
});
const handleDetails = async row => {
  detailsData.value = row;
  open.value = true;
  const url = await getDownloadPath(row?.fileUrl);
  openUrl.value = useGlobalState().globalState.fileUrl + url?.data?.url;
};
const handleDownload = async row => {
  const url = await getDownloadPath(row?.fileUrl);
  useFileUrlDownload(useGlobalState().globalState.fileUrl + url?.data?.url, row.fileName);
};
const columObj = ref({
  // selection: true,
  index: true,
  columnData: [
    {
      slotName: 'fileName',
      label: '附件文件',
    },
    {
      text: true,
      prop: 'fileType',
      label: '档案类型',
    },
    {
      text: true,
      prop: 'uploadTime',
      label: '记录时间',
    },
    {
      text: true,
      prop: 'projectType',
      label: '项目类型',
    },
    {
      text: true,
      prop: 'enterpriseName',
      label: '机构名称',
    },
    {
      text: true,
      prop: 'enterpriceCode',
      label: '机构代码',
    },
    {
      label: '操作',
      operations: [
        {
          type: 'text',
          label: '档案详情',
          buttonClick: handleDetails,
        },
        {
          type: 'text',
          label: '下载',
          buttonClick: handleDownload,
        },
      ],
    },
  ],
});
const handleQuery = () => {
  searchData.value.sDate = searchData.value.dateRange?.[0] ?? '';
  searchData.value.eDate = searchData.value.dateRange?.[1] ?? '';
  run(searchData.value);
};
const resetQuery = () => {
  searchData.value = {
    enterpriseName: '',
    fileName: '',
    projectType: '',
    fileType: '',
    dateRange: [],
    pageSize: 10,
    pageNum: 1,
  };
  handleQuery();
};
const getList = e => {
  searchData.value.pageNum = e.page;
  searchData.value.pageSize = e.limit;
  handleQuery();
};
const cancel = () => {
  open.value = false;
  openUrl.value = '';
  detailsData.value = [];
};
const handleSelectionChange = val => {
  const ids = val.map(item => item.agreementCode);
  selectionList.value = ids;
};
const showFile = async row => {
  open2.value = true;
  const url = await getDownloadPath(row?.fileUrl);
  open2Url.value = useGlobalState().globalState.fileUrl + url?.data?.url;
};
onMounted(() => {
  nextTick(() => {
    contBoxHeight.value = appContainer.value.clientHeight - formRef.value.$el.offsetHeight - 170;
  });
});
</script>

<template>
  <div ref="appContainer" class="app-container">
    <div class="u-base-fg u-mb20 u-pt20 u-pl20 u-pr20">
      <QueryForm
        ref="formRef"
        :searchList="searchList"
        :searchData="searchData"
        @resetQuery="resetQuery"
        @handleQuery="handleQuery"
      />
    </div>
    <div class="contBox">
      <div class="u-df-spb mb20">
        <span>档案列表</span>
      </div>
      <TableList
        v-loading="loading"
        :total="res?.total ?? 0"
        :height="contBoxHeight"
        :tableData="res?.rows"
        :pageObj="searchData"
        :columObj="columObj"
        @getList="getList"
        @handleSelectionChange="handleSelectionChange"
      >
        <template v-slot:fileName="{ scope }">
          <span class="u-primary cursor" @click="showFile(scope.row)">{{ scope.row.fileName }}</span>
        </template>
        <template v-slot:agreement="{ scope }">
          <span v-if="!scope.row?.agreementStartTime && !scope.row?.agreementEndTime">--</span>
          <span v-else>{{ scope.row?.agreementStartTime ?? '--' }} - {{ scope.row?.agreementEndTime ?? '长期' }}</span>
        </template>
        <template v-slot:belong="{ scope }">
          <span>{{ scope.row?.projectCode }} - {{ scope.row?.projectName }}</span>
        </template>
        <template v-slot:enterprise="{ scope }">
          <span>{{ scope.row?.enterpriseCode }} - {{ scope.row?.enterpriseName }}</span>
        </template>
      </TableList>
    </div>
    <el-dialog :visible.sync="open" width="70%" :before-close="cancel" append-to-body>
      <div slot="title" class="dialog-title">
        <span class="u-fs20 u-prim-text">监测项目</span>
      </div>
      <div class="u-prim-text u-mb20 u-fs16">企业基本信息</div>
      <el-descriptions title="" :column="2" size="small" border>
        <el-descriptions-item v-for="(item, index) in detailsList" :key="index" :label="item.label">
          <div>{{ detailsData?.[item.key] ?? '--' }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <div class="u-prim-text u-mb20 u-fs16 u-df-spb">
        <span>{{ detailsData?.fileName }}</span>
        <el-button type="primary" plain size="small">
          <a :href="openUrl" download>下载附件</a>
        </el-button>
      </div>
      <iframe :src="openUrl" width="100%" height="400" style="border: 0" />
    </el-dialog>
    <el-dialog
      title="附件内容"
      top="50px !important"
      :visible="open2"
      @close="open2 = false"
      width="90%"
      append-to-body
    >
      <iframe :src="open2Url" width="100%" height="700px" style="border: 0" />
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.u-pt20 {
  padding-top: 20px;
}
.u-pl20 {
  padding-left: 20px;
}
</style>
